import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {Address, Button} from "../../../../packages";
import {Tag} from 'antd';

export const demo1 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="基本用法">
      <Address province v-model={state.formData.province} width={200} placeholder="选择省"/>
      <Address city v-model={state.formData.city} parentValue={state.formData.province} width={200} placeholder="选择市"/>
      <Address district v-model={state.formData.district} parentValue={state.formData.city} width={200} placeholder="选择县"/>
      <Tag>
        {[
          state.formData.province,
          state.formData.city,
          state.formData.district
        ].filter(Boolean).join(',') || 'EMPTY'}
      </Tag>
    </DemoRow>
  );
});

export const demo2 = designPage(() => {

  const state = reactive({
    formData: {
      province: '440000',
      city: '440300',
      district: '440305',
    } as any
  });

  const setValue = () => {
    state.formData = {
      province: '500000',
      city: '500100',
      district: '500113',
    };
  };

  return () => (
    <DemoRow title="带初始值">
      <Address province v-model={state.formData.province} width={200} placeholder="选择省"/>
      <Address city v-model={state.formData.city} parentValue={state.formData.province} width={200} placeholder="选择市"/>
      <Address district v-model={state.formData.district} parentValue={state.formData.city} width={200} placeholder="选择县"/>
      <Tag>
        {[
          state.formData.province,
          state.formData.city,
          state.formData.district
        ].filter(Boolean).join(',') || 'EMPTY'}
      </Tag>
      <Button label="设置值" onClick={setValue}/>
    </DemoRow>
  );
});


export const demo3 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="选择省">
      <Address province v-model={state.formData.province} width={200} placeholder="选择省"/>
      <Tag>
        {[
          state.formData.province,
        ].filter(Boolean).join(',') || 'EMPTY'}
      </Tag>
    </DemoRow>
  );
});


export const demo4 = designPage(() => {

  const state = reactive({
    formData: {
      province: '440000',
      city: '440300',
    } as any
  });

  return () => (
    <DemoRow title="选择市">
      <Address city v-model={state.formData.city} parentValue={state.formData.province} width={200} placeholder="选择市"/>
      <Tag>
        {[
          state.formData.province,
          state.formData.city,
        ].filter(Boolean).join(',') || 'EMPTY'}
      </Tag>
    </DemoRow>
  );
});


export const demo5 = designPage(() => {

  const state = reactive({
    formData: {
      city: '440300',
      district: '440305',
    } as any
  });

  return () => (
    <DemoRow title="选择县">
      <Address district v-model={state.formData.district} parentValue={state.formData.city} width={200} placeholder="选择县"/>
      <Tag>
        {[
          state.formData.city,
          state.formData.district,
        ].filter(Boolean).join(',') || 'EMPTY'}
      </Tag>
    </DemoRow>
  );
});

export const demo6 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="选择省市">
      <Address province v-model={state.formData.province} width={200} placeholder="选择省"/>
      <Address city v-model={state.formData.city} parentValue={state.formData.province} width={200} placeholder="选择市"/>
      <Tag>
        {[
          state.formData.province,
          state.formData.city,
        ].filter(Boolean).join(',') || 'EMPTY'}
      </Tag>
    </DemoRow>
  );
});


export const demo7 = designPage(() => {

  const state = reactive({
    formData: {
      province: '440000',
      city: '440300',
      district: '440305',
    } as any
  });

  const setValue = () => {
    state.formData = {
      province: '500000',
      city: '500100',
      district: '500113',
    };
  };

  return () => (
    <DemoRow title="选择市县">
      <Address province v-model={state.formData.province} width={200} placeholder="选择省" disabled/>
      <Address city v-model={state.formData.city} parentValue={state.formData.province} width={200} placeholder="选择市"/>
      <Address district v-model={state.formData.district} parentValue={state.formData.city} width={200} placeholder="选择县"/>
      <Tag>
        {[
          state.formData.province,
          state.formData.city,
          state.formData.district
        ].filter(Boolean).join(',') || 'EMPTY'}
      </Tag>
      <Button label="设置值" onClick={setValue}/>
    </DemoRow>
  );
});
